<template>
	<view style="width: 100vw;height: 100vh;">
		<!-- #ifdef APP-PLUS -->
		<view class="statusbox"></view>
		<!-- #endif -->
		<view class="" style="margin:20rpx auto ">
			<view class="" style="width: 690rpx;margin:30rpx auto ; display: flex;justify-content: space-between;align-items: centerflter;align-items:center">

				<view class="hade_input">
					<view class="head_name">
						金世界
					</view>
					<view class="head_link" ></view>
					<view class="hade_icon">
						<image src="@/static/ai/sou.png" style="width: 35rpx;" mode="widthFix"></image>
					</view>
					<view style="color: gray;" @click="searchClick()">搜索比赛场次</view>

					<!-- <input type="text" class="search_input" v-model="search_name" @confirm="search"
						placeholder="搜索比赛场次" placeholder-class="color-6"> -->

				</view>
				<view >
					<image src="@/static/ai/user.png" @click="mineClick()" style="width: 42.3rpx;" mode="widthFix"></image>
				</view>
			</view>
			<!-- 轮播  -->
			<view class="" v-if="slider.length<2" style="">
									<image :src="singleBanner.image" mode=""
										style="height: 350rpx;margin: 20rpx 0;border-radius: 20px;width: 100%;"></image>
								</view>
			<view class="swiper_class" style="">
				<swiper class="swiper_list" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="5000" :duration="1000">
					<swiper-item   v-for="switem,id in slider" >
						<view class="swiper-item uni-bg-red">
							<image :src="switem.image" :class="ktheme == 'black' ? 'item-border-black': 'item-border-pup'" class="sw_image " @click="swiperUrl(switem)" mode="" ></image>
						</view>
					</swiper-item>
				</swiper>

				<!-- <customSwiper :swiper-list="slider" /> -->
			</view>
			<view class="" style="display: flex;width: 690rpx;margin:20px auto 2rpx">
<image src="@/static/ai/icon_2.png" style="width: 39rpx;height:38rpx;" mode="widthFix"></image>
				<view style="" class="evolve_Class"  >
					<!--  @click="ticketBalanceClick"   -->
					赛事进展 
				</view>
			</view>
			<view class=""   style="width: 100%;display: flex;margin: 10rpx auto;justify-content: flex-end;">
				<view class="" style="width: 94%; overflow-x: scroll;display: flex;overflow-y: hidden;">
					<view class="mess_class"  style="min-width: 530rpx;" v-for="items in EventList">
					<view style="position: relative;">
						<image src="@/static/ai/index_back.png" style="border-radius: 16rpx;width: 492rpx;height: 275rpx" mode="">
						</image>
				
						<view style="position: absolute; top: 1rpx;">
							<view class="mess_link "  >
								<view class="mess_name"  style="width: 340rpx;text-align: right;margin-right: 6rpx;padding-right: 26rpx;">
								{{items.eventName}}
								</view>
								<!--  -->
								<view class="mess_state ">
									<!--  1->未开始 2->预约参赛 3->比赛进行中 4->比赛结束 -->
									<text v-if="items.status==1">未开始</text>
									<text v-if="items.status==2">预约参赛</text>
									<text v-if="items.status==3">进行中 </text>
									<text v-if="items.status==4">比赛结束</text>
								</view>
							</view>
							<view class="mess_link link_back"  style="margin-top:30rpx;">
								<view class="" style="display: flex;align-items: center;">
									<text class="link"></text>
									<text class="mess_ranking">第一名</text>
								</view>
								<view class="mess_ticket sColorSize">
									
									<text v-if='items.oneTicket!=null'>{{items.oneTicket}}</text>
									<text v-else>0</text>票
								</view>
							</view>
							<view class="mess_link link_back" >
								<view class=""  style="display: flex;align-items: center;">
										<text class="link"></text>
									<text class="mess_ranking">第二名</text>
								</view>
								<view class="mess_ticket sColorSize">
									<text v-if='items.twoTicket!=null'>{{items.twoTicket}}</text>
									<text v-else>0</text>
									票
								</view>
							</view>
							<view class="mess_tz sColorSize" @click="finishAccomplishRank(items.id)">
								点击查看赛事进程 <uni-icons type="forward" size="20" color="#7257EE"></uni-icons>
							</view>
						</view>
						</view>
					</view>

				</view>
			</view>
			<view class=""   v-if="ifRemind"   style="position: relative;margin: 18rpx auto;width: 690rpx;">
				<image src="@/static/ai/back_mess.png" style="width: 697rpx;" mode="widthFix"></image>
				<view class="mess_ai" style="">
				<view class="">{{remindMsg}} </view>
				<view class="open_botton" @click="accrueClick()" style="color: #AA56D7;font-weight: 600;">
					<text>立即查看</text>
				</view>
			</view>
			
			</view>
			<view class="tab_box">
				<view v-for="(item, index) in tabList">
					<view class="tab_dd" :class="[{sel:item.id == tabCurrent},{ nsel:item.id != tabCurrent}]"
						:style="[selStyle]" :key="index" @tap="set_tab(item.id)">
						<view>{{item.name}} </view>
					</view>
				</view>
			</view>

			<view class="" style="width: 699rpx;margin: 20rpx auto;" v-for="item in eList">
				<view class="" style="width: 690rpx;position: relative;">
					<view class="">
						<image :src="item.themeImage" style="border-radius: 16rpx;width: 690rpx;height: 600rpx" mode="">
						</image>
					</view>
					<view class=""
						style="width: 115rpx; text-align: center;top: 20rpx;left: 20rpx;position: absolute;color: #FF4B2B;border-radius: 50rpx;padding: 4rpx;">
	<!-- 比赛状态 1->未开始 2->预约参赛 3->比赛进行中  4->比赛结束 -->
						<image v-if='item.status==1' class='icon' src="@/static/ai/unopen.png" mode=""></image>
						<image v-if='item.status==2' class='icon' src="@/static/ai/subscribe.png" mode=""></image>
						<image v-if='item.status==3' class='icon' src="@/static/ai/conduct.png" mode=""></image>
						<image v-if='item.status==4' class='icon' src="@/static/ai/finish.png" mode=""></image>
					</view>
					<!-- 预约中的比赛，显示开始时间（时分）；进行中的比赛显示结束时间（时分）；未开放和已结束的比赛不显示 -->
					<!-- 开始时间：报名结束时间   结束 ：投票介绍时间 -->
					<view class="mess_date"  v-if="item.status==2 && item.signupEndTime!='00:00:00'" style="">
					距离开赛时间:{{item.signupEndTime}}
					</view>
					<view class="mess_date"  v-if="item.status==3 && item.voteEndTime!='00:00:00'" style="">
					距离结束时间:{{item.voteEndTime}}
					</view>

					<view
						style="position: absolute;bottom:0;display: flex;width: 690rpx;background: linear-gradient(0deg, #FFFFFF, rgba(255,255,255,0.7), rgba(255,255,255,0.25));box-shadow: 1rpx 5rpx 16rpx 0rpx #EFEFEF;padding: 20rpx;">
							<view class="" >
								<view class=""
									style="width: 479rpx;font-size: 32rpx;font-weight: 500;color: #333333;line-height: 52rpx;">
									场次编号：{{item.eventName}}
								</view>
								<view class=""
									style="width: 479rpx; margin-top: 8rpx;font-size: 32rpx;font-weight: 500;color: #333333;">
									比赛主题：{{item.theme}}
								</view>
										<view class="linkfn" v-if="item.investor">
											<image src="@/static/ai/wicon.png" style="width: 26rpx;margin: 0 8rpx ;"
												mode="widthFix"></image><text> 赋能方：{{item.investor}}</text>
								</view>
							
					
						</view>
						<!--status  1->未开始 2->预约参赛 3->比赛进行中  4->比赛结束  -->
						<view class="" :style="{backgroundColor:((item.status== '2' || item.status=='3' )?' #AA56D7':' #ccadf7')}" @tap="finishClick(item.status,item.id)"
							style=" margin-top: 28rpx;width: 112rpx;height: 112rpx;border-radius: 62rpx;">
							<view class=""
								style="width: 112rpx;text-align: center;height: 112rpx;font-size: 32rpx;font-weight: 600;line-height: 110rpx;color: #FFFFFF;">
								<text v-if="item.status==1">未开放</text>
								<text v-if="item.status==2">预约</text>
							<text v-if="item.status==3">
									<text v-if='item.evolveStatus==2'>参赛</text>
									<text v-else-if='item.evolveStatus==3'>投票</text>
									<text  v-else>进行中</text>
								    </text>
								<text v-if="item.status==4  || item.status==null">结束</text>
							</view>

						</view>

					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import customSwiper from '@/components/blackmonth-swiper/index'
	export default {
		components: {
			customSwiper
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				swiperList: [],
				tabCurrent: 0,
				tabList: [],
				selStyle: {
					'--selectColorSize': this.$store.state.selectColorSize, //字体颜色
					'--buttonBcak': this.$store.state.buttonBcak, //按钮颜色
					'--borderSty': this.$store.state.borderSty, //选中背景线颜色
					'--QianmenonlyBackgournd': this.$store.state.QianmenonlyBackgournd, //单个背景颜色
					QianmenonlyBackgournd2: this.$store.state.QianmenonlyBackgournd2, //单个背景颜色
					buttonBcak: this.$store.state.buttonBcak, //选中背景线颜色: this.$store.state.borderSty, //选中背景线颜色
				},
				selectColorSize: this.$store.state.selectColorSize, //单个背景颜色
singleBanner:{},

				slider: [],
				list: [],
				EventList:[],
				eList:[],
				search_name: "",
				pageNo:1,
				pageSize:10,
				downTime:"",
				interval: null,
				ifshow:true,
				interval_list:[],
				interval_list2:[],
				recently:1,
				hasNextPage:true,
				ifRemind:false,//验证是否显示生成数据
				remindMsg:'',
				timer: null, // 定时器ID
				aiEventId:'',
				timerAiEventList:null,
				ifOpen:false,
				ifOpen2:false,
				aiOrderId:"",
				uid:""
			}
		},
		onPullDownRefresh() {

			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
			this.pageNo =1
			this.eList=[];
		this.getBanner()
		this.getAiEvent()
		this.getAiEventList()
		this.getRecentThreeDays()
	    this.getAirRemind()
		},
		onReachBottom() {
			if (this.hasNextPage) {
				this.pageNo = this.pageNo + 1;
				this.getAiEventList()
			}
		},
		onShow() {
			let messageType = uni.getStorageSync('messageType')
					this.aiOrderId = uni.getStorageSync('aiOrderId').aiOId
			if (messageType == 'ai') {
				//验证支付支付
				this.$api.userInfo({}, res => {
					if (res.status) {
						this.uid = uni.getStorageSync('aiOrderId').uid
					
						if (res.data.uid == this.uid) {
							uni.removeStorageSync('messageType')
							uni.removeStorageSync('ifAIsd')
							var data = {
								aiOrderId:this.aiOrderId 
							}
							this.$api.aiCheckPay(data, res => {
								if (res.status) {
									this.accrueClick()
								} else {
									return
								}
							})
						}
						// uni.setStorage('walletStatue', res.data.walletStatus)
					}
				})
			}
			this.pageNo =1
			this.eList=[];
	      this.getAirRemind()
		 this.getBanner()
		 this.getAiEvent()
		  this.getAiEventList()
		 this.getRecentThreeDays()
	
		},
		onLoad(val) {
			this.$api.userInfo({}, res => {
				if (res.status && res.data.walletStatus) {
				 
					this.uid=res.data.uid
					// uni.setStorage('walletStatue', res.data.walletStatus)
				}
			})	
			// uni.navigateTo({
			// 	url:'/pages/aipicture/ai_create/ai_create?aiEventId='+this.aiEventId+'&aiOrderId='+this.aiOrderId
			// })
	
		},
		 mounted() {
		    // 设置定时器，每30秒请求一次接口
		this.timer = setInterval(this.getAirRemind, 30000);//请求生成状态
		 
		this.timerAiEventList = setInterval(this.getList, 60000); // 60000毫秒 = 1分钟 
		  },
		  onUnload() {
		   if (this.timer) {
		     clearInterval(this.timer);
		     this.timer = null;
		   }
		   if(this.timerAiEventList) {
		   clearInterval(this.timerAiEventList);
			this.timerAiEventList = null;
	   }
		  
		  },
		  onHide() {  
		    // 组件销毁前清除定时器，防止内存泄漏
		    if (this.timer) {
		      clearInterval(this.timer);
		      this.timer = null;
		    }
		     if (this.timerAiEventList) {
		     clearInterval(this.timerAiEventList);
		         this.timerAiEventList = null;
		        }
		  } ,
		methods: {
			getList(){
			 
				this.pageNo =1
				this.eList=[];
				 this.getAiEventList()
				 this.getAiEvent()
			},
			getAirRemind(){
				this.$api.airRemind(res=>{
					 
				if(res.data==null){
					this.ifRemind=false
					if (this.timer) {
					  clearInterval(this.timer);
					  this.timer = null;
					}
				}else{
					this.ifRemind=true
					this.remindMsg=res.data.remindMsg
					if(this.remindMsg =='您的AI创作已生成'){
						if (this.timer) {
						  clearInterval(this.timer);  
						  this.timer = null;  
						} 
					}
					this.aiOrderId=res.data.aiOrderId
					this.aiEventId=res.data.aiEventId
				}
				})
			},
			getBanner() {
				var data={
					type:2
				}
				this.$api.getAiBanner(data, (res) => {
					let data = res.data
					if (data && data.length == 1) {
						this.singleBanner = data[0]
					} else {
						this.slider = res.data
					}
				});
			},
			 
			getAiEventList(){
				var data={
					eventName:"",
					recently:this.tabCurrent,//this.tabCurrent
					pageNo:this.pageNo,
					pageSize:this.pageSize,
				}
				this.$api.getAiEventList(data,res=>{
		if (res.status) {
		    this.eList = this.eList.concat(res.data.list);
		    let nowTime = new Date().getTime();
		    this.interval_list = {}; // 使用对象来存储定时器
		    this.interval_list2 = {};
		    this.hasNextPage = res.data.list.length >= this.pageSize;

		    for (let i = 0; i < this.eList.length; i++) {
		        let item = this.eList[i];
		        let isValidVoteEndTime = this.isValidDate(item.voteEndTime);
		        let isValidSignupBeginTime =  this.isValidDate(item.signupEndTime);

		        if (!isValidVoteEndTime || !isValidSignupBeginTime) {
		            continue; // 或者处理无效日期的情况
		        }
				//
		        let vTime = new Date(item.voteEndTime).getTime();
		        let sTime = new Date(item.signupEndTime).getTime();

		        let timeleft = isValidVoteEndTime ? (vTime - nowTime) / 1000 : 0;
		        let timeleftsig = isValidSignupBeginTime ? (sTime - nowTime) / 1000 : 0;

		        item.voteEndTime = this.formatTime(timeleft);
		        item.signupEndTime = this.formatTime(timeleftsig);

		        // 距离结束时间
		        this.interval_list[i] = setInterval(() => {
		            let currentTime = new Date().getTime();
		            let newTimeleft = (vTime - currentTime) / 1000;
		            if (newTimeleft < 0) {
		                item.voteEndTime = '00:00:00';
							clearInterval(this.interval_list[i]);
						
		            } else {
		                item.voteEndTime = this.formatTime(newTimeleft);
		            }
		        }, 1000);
               //	距离开赛时间
		        this.interval_list2[i] = setInterval(() => {
		            let currentTime = new Date().getTime();
		            let newSigTimeleft = (sTime - currentTime) / 1000;
		            if (newSigTimeleft < 0) {
		                item.signupEndTime = '00:00:00';
		                clearInterval(this.interval_list2[i]);
		            } else {
		                item.signupEndTime = this.formatTime(newSigTimeleft);
		            }
		        }, 1000);
		    }
		}
				})
				
			},

			// 辅助函数来检查日期字符串是否有效
			 isValidDate(dateStr) {
			    const date = new Date(dateStr);
			    return !isNaN(date.getTime());
			},

			// 假设 $common.time2date 已经被替换或重命名为 formatTime
			 formatTime(seconds) {
			    // 这里应该是将秒数转换为时间字符串的逻辑
			    // 如果 seconds 是 NaN 或负数，则返回 '00:00:00' 或其他合适的默认值
			    if (isNaN(seconds) || seconds < 0) {
			        return '00:00:00';
			    }else{
					return  this.$common.time2date(seconds);
				}


			    // 假设 $common.time2date 已经正确处理了秒数到时间的转换
			},
			getAiEvent(){
					this.$api.getAiEvent(res=> {
						if(res.status){
						this.EventList=res.data
						}
								});
			},
			searchClick(){
				uni.navigateTo({
					url: '/pages/aipicture/search_session'
				})
			},
			mineClick(){
				uni.navigateTo({
					url: '/pages/aipicture/mine/index'
				})
			},
			// 一鍵生成界面
			accrueClick() {
				
			var data = {
				aiEventId: this.aiEventId,
				aiOrderId: this.aiOrderId
			}
			console.log("-一鍵生成界面-",this.aiOrderId);
			var aiOrderId={
				uid:this.uid,
				aiOId: this.aiOrderId
			}
			uni.setStorageSync('aiOrderId',aiOrderId)
			this.$api.aiWorksInfo(data, res => {
				 
				if (res.status) {
					if (res.data.taskStatus == 2 || res.data.taskStatus ==1) {
						uni.navigateTo({
							url:'/pages/aipicture/ai_create/ai_create?aiEventId='+this.aiEventId+'&aiOrderId='+this.aiOrderId
						}) 
					}else{ 
						this.$common.errorToShow(res.data.remindMsg);
						uni.navigateTo({
							url: '/pages/aipicture/mine/diamond-list'
						})
					}
				
				} else {
					this.$common.errorToShow(res.message)
				
				}
			
			})
				
			},
			set_tab: function(id) {
				this.tabCurrent = id
					this.pageNo =1
					this.eList=[];
				this.getAiEventList()


			},
			swiperChange: function(e) {
				this.index = e.detail.current;
			},
			finishClick(val,id) {

				if(val==4 || val==2 || val==3){
					uni.navigateTo({
						url: '/pages/aipicture/finish/finish?id=' + id
					})
				}


			},
			finishRankClick() {
				uni.navigateTo({
					url: '/pages/aipicture/finish/finish'
				})
			},
			// 共识票余额
			ticketBalanceClick() {
				let url = 'https://shucang2.zhongfujiayi.com/#/pages/aipicture/ai_create/ai_create?aiEventId=1817811709127151618';
				// #ifdef H5
				window.location.href = url;
				// #endif
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '/pages/payment/aiapp-webview?url=' + url
				})
				// #endif
				// uni.navigateTo({
				// 	url:'/pages/aipicture/accrue_picture/accrue_picture'//url: '/pages/aipicture/ticket_balance/ticket_balance'
				// })
			},
			// 活动结束榜单
			finishAccomplishRank(id) {
				uni.navigateTo({
						url: '/pages/aipicture/finish/finish?id=' + id
					// url: '/pages/aipicture/finish_accomplish_rank/finish_accomplish_rank'
				})
			},
			//轮播图跳转
			swiperUrl(val) {
				let url = val.url;
				// #ifdef H5
					window.location.href = url;
				// #endif
				// #ifdef APP-PLUS
						uni.navigateTo({
							url: '/pages/user/webview/webview?url=' + url
						})
				// #endif

			},
			 getRecentThreeDays() {
			    const today = new Date();
			    // 今天的日期
			    let todayDate = new Date(today);
			    todayDate.setHours(0, 0, 0, 0); // 重置时间为00:00:00

			    // 昨天的日期
			    let yesterdayDate = new Date(today);
			    yesterdayDate.setDate(yesterdayDate.getDate() + 1);
			    yesterdayDate.setHours(0, 0, 0, 0);

			    // 前天的日期
			    let beforeYesterdayDate = new Date(today);
			    beforeYesterdayDate.setDate(beforeYesterdayDate.getDate() + 2);
			    beforeYesterdayDate.setHours(0, 0, 0, 0);
	var  days=[{id:0,name:this.formatDate(todayDate)},
		 {id:1,name:this.formatDate(yesterdayDate)},
		 {id:2,name:this.formatDate(beforeYesterdayDate)}]
			  this.tabList=days
			    // return days;
			},

			// 格式化日期为 YYYY-MM-DD 字符串
			 formatDate(date) {
			    const year = date.getFullYear();
			    const month = String(date.getMonth() + 1).padStart(2, '0');
			    const day = String(date.getDate()).padStart(2, '0');
			    return `${year}-${month}-${day}`;
			}  , search() {

			},

		}
	}
</script>

<style scoped lang="scss">
	uni-page-body,
	html,
	body {
		height: 100%;
		background-color: white !important;
		// background-color: var(kbackgroundColor);
	}
    .statusbox {
			height: var(--status-bar-height);
		}
	.head_name {
		font-size: 37rpx;
		font-weight: bold;
		line-height: 80rpx;
		margin: 0 20rpx 0 30rpx;

	}

	.hade_input {
		width: 608rpx;
		display: flex;
		align-items: center;
		height: 82rpx;
		background: #F5F4FF;
		border-radius: 36rpx;
	}
	.head_link{
		width: 1rpx;height: 37rpx;border-left: 1px solid #BFBFBF;
	}
	.hade_icon {
		margin: 0 20rpx;
		padding-top: 10rpx;
	}

	.search_input {
		flex: 1;
		height: 80rpx;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #333;
	}

	 

	.mess_class {
		width: 490rpx;
		height: 300rpx;
		// background: #F8F6FF;
	 
		border-radius: 20rpx;
		padding: 20rpx 0;
		margin-right: 14rpx;

	}

	.mess_link {
		padding: 4rpx 15rpx;
		display: flex;
		justify-content: space-between;
	}
	.link_back{
		width: 404rpx;
		margin: 16rpx auto;
		border-radius: 40rpx;
		background: linear-gradient(135deg, #d9c5ffb8 , #d6c1ff7a ,#ffffff);
	}
	.link{
		display:block ;
		margin: 0 10rpx ;
		width: 9rpx;
		height: 9rpx;
		background: #8460DF;
		border-radius: 50%;
	}

	.mess_name {
		width: 278rpx;
		height: 34rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #2c2c2c;
		line-height: 32rpx;
	}
	.linkfn{
		height: 45rpx;
		display: inline-block;
		margin-top: 14rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		border-radius:30rpx;padding: 0rpx 20rpx 0 10rpx;line-height: 1.5;
	 background: linear-gradient(135deg, #7257EE ,#ab01ee);
	}

	.mess_state {
		width: 126rpx;
		height: 48rpx;
		font-size: 24rpx;
		text-align: center;
		font-weight: 400;
		right: 0rpx;
		    margin-top: 4px;
			 margin-right: -20rpx;
		line-height: 48rpx;
		  border-radius:5rpx 30rpx 5rpx 36rpx;
	   color: rgb(255, 255, 255);
		    background: linear-gradient(135deg, #7257EE ,#ab01ee);
	}

	.mess_ranking {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.mess_ticket {
		font-size: 30rpx;
		font-weight: bold;
		// color: #673DE7;
		line-height: 30rpx;
	}

	.mess_tz {
		margin-top: 13rpx;
		// width: 364rpx;
		font-size: 26rpx;
		font-weight: 400;
		display: flex;
	justify-content: center;
	    align-items: center;

	}
.mess_name{
	margin-top:2rpx;width: 454rpx;height: 50rpx;line-height: 50rpx ;font-size: 28rpx;font-weight: 400;color: #6958D5;
}
	.sColorSize {
		color: #7257EE;
	}

	.swiperWrap {
		width: 690rpx;

		height: 336rpx;
		border-radius: 30rpx;
	}

	.ai_tz {
		width: 690rpx;
		height: 92rpx;
		line-height: 92rpx;
		background: linear-gradient(135deg, #D1C84D 0%, #3FA87B 100%);
		border-radius: 20rpx;
		margin: 20rpx auto;
	}

	.tab_box {
		margin: 38rpx auto;
		width: 690rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.sel {
			border: 2px solid #7257EE;
			background: #F8F6FF;
			color: #7257EE;
			font-weight: 500;
		}

		.nsel {
			font-weight: 400;
			color: #7257EE;
			background: #FFF8F6FF;
		}

		.tab_dd {
			width: 216rpx;
			height: 59rpx;
			line-height: 53rpx;
			border-radius: 30rpx;
			// border: 1rpx solid #6958D5;

			font-size: 32rpx;
			text-align: center;

			// border:var(--borderSty);
			// background-color:var(--borderSty);
			position: relative;
		}

		.tabActive {
			// // color: #863A3A;
			// color:var(--selectColorSize);
			background-color: red;
			;
			font-weight: bold;
		}

		.tabActive::after {
			display: block;
			clear: both;
			content: '';
			width: 65%;
			height: 10rpx;
			// background:red;
			background: var(--selBcakborder);
			border-radius: 100rpx;
			position: absolute;
			left: 50%;
			bottom: -16rpx;
			transform: translateX(-50%);
		}
	}

	.mess_date {
		// width: 224rpx;
		padding: 0 16rpx;
		height: 42rpx;
		text-align: center;
		top: 20rpx;
		right: 20rpx;
		position: absolute;
		border-radius: 20rpx;
		color: white;
		background: #000;
		// background: url('@/static/aipicture/black.png') no-repeat;
	}

	.evolve_Class {
		font-size: 32rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.icon {
		width: 70rpx;
		height: 70rpx;
	}

	.swiper_class {
	   margin: 20rpx auto;
		width: 690rpx;
		text-align: center;
			border-radius: 20rpx;
		// height:500rpx;
		.sw_image {
			// margin: 20rpx 40rpx 20rpx 40rpx;
			width: 97%;
			height: 93%;
			border-radius: 20rpx;
		}
	}

	//轮播图

	.swiper {
		height: 348rpx;

	}
.swiper_list {
		border-radius: 30rpx;
		padding: 0;
		margin: 0;
height: 326rpx !important;
	}
	.swiper-item {
		display: block;
		height: 338rpx;
		text-align: center;
	}

	/deep/.uni-swiper-dot {
		padding: 3rpx;	background-color:#f8cdff !important;
	}
	/deep/.uni-swiper-dot-active{
		background-color::#AA56D7 !important;
		width: 30rpx;
		height: 10rpx;
		border-radius: 20rpx;
	}
	/deep/.uni-swiper-dots-horizontal{
		bottom: 40rpx !important;
	}
.mess_ai{
	width: 690rpx;
   position: absolute;top:30rpx;
   left: 32rpx;
	border-radius: 10rpx;
	color: #fff;
}
	.open_botton {
		 margin-top:20rpx ;
		background: linear-gradient(-90deg, #6C58D5, #AA56D7);
		text-align: center;
		border-radius: 40rpx;
	   padding:15rpx 25rpx;
	   width: 190rpx;

		text {
			color: white;
			display: block;

		}
	}
</style>
